<template>
  <el-form :model="ruleForm"
           :rules="rules"
           ref="ruleForm"
           label-width="100px"
           class="yuyi-ruleForm">

    <div class="form-center">
      <section class="item-form">
        <hgroup>基础信息</hgroup>
        <el-form-item label="登记号" prop="registerNo">
          <el-input disabled v-model="ruleForm.registerNo"></el-input>
        </el-form-item>
        <el-form-item label="利用方式" prop="modeType">
          <el-radio-group v-model="ruleForm.modeType">
            <el-radio v-for="(item, index) in modeTypeDic"
                      :key="index"
                      :label="item.dictValue">{{item.dictLabel}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="利用目的" prop="purposeType">
          <el-select style="width: 100%" v-model="ruleForm.purposeType" placeholder="请选择利用目的">
            <el-option v-for="(item, index) in purposeTypeDic"
                       :key="index"
                       :label="item.dictLabel"
                       :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="利用机构">
          <div class="liyong-jigou">
            <el-radio-group v-model="ruleForm.orgType">
              <el-radio label="1">个人利用</el-radio>
              <el-radio label="2">单位利用</el-radio>
            </el-radio-group>
            <el-input v-if="ruleForm.orgType === '2'" class="unit-input" v-model="ruleForm.orgName"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="其它说明">
          <el-input v-model="ruleForm.other"
                    type="textarea"
                    show-word-limit
                    :autosize="autosize"
                    maxlength="500"></el-input>
        </el-form-item>
      </section>

      <section class="item-form">
        <hgroup>查档人信息</hgroup>

        <el-upload
          class="yuyi-upload"
          :action="action"
          :headers="headers"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

        <el-form-item label="姓名" prop="username">
          <el-input v-model="ruleForm.username" style="width: 270px"></el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select style="width: 270px" v-model="ruleForm.certificateType" placeholder="请选择证件类型">
            <el-option v-for="(item, index) in certificateTypeDic"
                       :key="index"
                       :label="item.dictLabel"
                       :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式" prop="userPhone">
          <el-input type="tel" style="width: 270px" maxlength="11" v-model="ruleForm.userPhone"></el-input>
        </el-form-item>
        <el-form-item label="证件号码" prop="certificateNo">
          <el-input v-model="ruleForm.certificateNo" ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="ruleForm.gender">
            <el-radio v-for="(item, index) in genderDic"
                      :key="index"
                      :label="item.value">{{item.label}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系地址">
          <el-input type="textarea" :autosize="autosize" v-model="ruleForm.address"></el-input>
        </el-form-item>
      </section>
    </div>

    <el-form-item class="btn-sumbit">
      <el-button type="primary"
                 size="small"
                 :loading="submitLoading"
                 @click="submitForm('ruleForm')">保存
      </el-button>
      <el-button size="small"
                 :loading="submitLoading"
                 @click="resetForm('ruleForm')">重置
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { addDjList, getDengjiDh } from '../../../../api/utilize/utilizeDengji'
import { getArchivesDicId, getSysDicId } from '../../../../api/dictionary/dictionary'
import { cardid } from '../../../../util/validate'
import { DEFAULT_ENTRYPOINT } from '../../../../config/entrypoint'
import { getToken } from '@/util/auth'

export default {
  name: 'addRegister',
  data () {
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        callback()
      } else {
        const reg = /^1[0-9]{10}$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }
    const idCard = (rule, value, callback) => {
      // 身份证号码验证
      const result = cardid(value)
      if (result.result) {
        callback()
      } else {
        return callback(new Error(result.msg))
      }
    }
    return {
      imageUrl: '',
      autosize: {
        minRows: 4,
        maxRows: 8
      },
      submitLoading: false,
      genderDic: [{
        label: '女',
        value: 0
      }, {
        label: '男',
        value: 1
      }, {
        label: '其他',
        value: 2
      }],
      certificateTypeDic: [], // 证件类型
      modeTypeDic: [], // 利用方式
      purposeTypeDic: [], // 利用目的
      ruleForm: {
        registerNo: '', // 登记单号
        modeType: '', // 利用方式
        purposeType: '', // 利用目的
        orgType: '1', // 利用机构
        orgName: '', // 利用单位名称
        other: '', // 其他说明
        username: '', // 用户姓名
        certificateType: 'identity', // 证件类型
        userPhone: '', // 用户电话
        certificateNo: '', // 证件号码
        gender: '', // 性别
        address: '', // 联系地址
        avatar: '' // 头像
      },
      rules: {
        modeType: [
          {
            required: true,
            message: '请选择利用方式',
            trigger: 'change'
          }
        ],
        username: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'change'
          }
        ],
        certificateNo: [
          {
            required: true,
            validator: idCard,
            trigger: 'blur'
          }
        ],
        userPhone: [
          {
            validator: checkPhone,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted () {
    this.getDic()
  },
  computed: {
    headers () {
      const obj = {
        Authorization: 'bearer ' + getToken()
      }
      return obj
    },
    action () {
      const bucketType = 'use'
      return DEFAULT_ENTRYPOINT + `/yuyi-user-boot/api/sys/v1/sysUser/bucketType/${bucketType}/fileUpload`
    }
  },
  methods: {
    getDic () {
      getDengjiDh().then(res => {
        // 获取登记单号
        this.ruleForm.registerNo = res.data.data
      })
      getSysDicId('document_type').then(res => {
        // 获取证件类型
        this.certificateTypeDic = res.data.data
        this.ruleForm.certificateType = this.certificateTypeDic[0].dictValue
      })
      getArchivesDicId('utilize_mode').then(res => {
        // 获取利用方式
        this.modeTypeDic = res.data.data
        this.ruleForm.modeType = this.modeTypeDic[0].dictValue
      })
      getArchivesDicId('utilize_objective').then(res => {
        // 利用目的
        this.purposeTypeDic = res.data.data
      })
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.ruleForm.avatar = res.data
    },
    beforeAvatarUpload (file) {
      /* const isJPG = file.type === 'image/jpeg'
              const isLt2M = file.size / 1024 / 1024 < 2

              if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!')
              }
              if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
              }
              return isJPG && isLt2M */
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.orgType === '2') {
            delete this.ruleForm.orgName
          }

          this.submitLoading = true
          addDjList(this.ruleForm).then(() => {
            this.$message.success('新增成功！')
            this.submitLoading = false
            this.$emit('handleSuccess')
          }).catch(() => {
            this.submitLoading = false
          })
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../../styles/mixin";

  .yuyi-ruleForm {
    padding-right: 30px;
    height: calc(100vh - 220px);
    overflow-y: auto;

    .form-center {
      @include fj;
    }

    .item-form {
      position: relative;
      padding: 0 20px;
      flex: 1;

      hgroup {
        @include sc(16px, #333);
        line-height: 30px;
        margin-bottom: 15px;
      }

      .liyong-jigou {
        .unit-input {
          width: calc(100% - 210px);
          float: right;
        }
      }
    }

    .yuyi-upload {
      position: absolute;
      right: 10px;
      z-index: 2;
      border: 1px dashed #ccc;

      .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;

        &:hover {
          border-color: #409EFF;
        }
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 160px;
        height: 160px;
        line-height: 160px;
        text-align: center;
      }

      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    }

    .btn-sumbit {
      padding-top: 20px;
      text-align: right;
    }
  }
</style>
